<template>
  <div class="PersonSimpleResume">
    <!-- 头部 -->
    <nav-bar :title="'在线简历'"></nav-bar>
    <div class="circle_bg"></div>
    <!-- 内容区域 -->
    <el-form :model="dataList" :rules="rulesadd" ref="Refform">
      <div class="main cl">
        <div class="block w1200">
          <div class="left fl">
            <el-alert
              v-if="checkResult && '成功' != checkResult"
              :title="checkResult"
              type="error"
            >
            </el-alert>
            <div class="top">
              <label>请填写信息</label>
              <!--              <div class="btnEdit box77" style="top: 25px" @click="showshow">
                              <i class="el-icon-edit-outline"></i>编辑
                            </div>-->
            </div>
            <div class="resume">
              <!-- 个人信息 -->
              <div class="section userinfo">
                <el-row :gutter="20">
                  <el-col :span="13" style="display: fiex">
                    <!-- 姓名 -->
                    <el-form-item label="真实姓名" prop="username">
                      <el-input
                        v-model.trim="dataList.username"
                        placeholder="请填写姓名"
                        style="width: 56%"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="11">
                    <!-- 性别 -->
                    <el-form-item label="性别" prop="sex">
                      <el-select
                        v-model="dataList.sex"
                        placeholder="请选择男女"
                        style="width: 70%"
                      >
                        <el-option label="女" value="女"></el-option>
                        <el-option label="男" value="男"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="13" style="display: fiex">
                    <!-- 出生日期 -->
                    <el-form-item label="出生日期" prop="birthDay">
                      <el-date-picker
                        v-model="dataList.birthDay"
                        type="date"
                        placeholder="出生日期"
                        value-format="yyyy-MM-dd"
                        style="width: 56%"
                      >
                      </el-date-picker>
                    </el-form-item>
                  </el-col>
                  <el-col :span="11">
                    <!-- 籍贯 -->
                    <el-form-item prop="birthPlace" label="籍贯">
                      <el-cascader
                        v-model="dataList.birthPlace"
                        :options="areaList"
                        placeholder="请选择籍贯"
                        style="width: 70%"
                      ></el-cascader>
                    </el-form-item>
                  </el-col>
                </el-row>
                <!-- 姓名 
                <el-form-item prop="username" label="姓名">
                  <el-input
                    v-model="dataList.username"
                    placeholder="请填写姓名"
                    style="width: 60%"
                  >
                  </el-input>
                </el-form-item>-->
                <!-- 性别 
                <el-form-item label="性别" prop="sex">
                  <el-select
                    v-model="dataList.sex"
                    placeholder="请选择男女"
                    style="width: 60%"
                  >
                    <el-option label="女" value="女"></el-option>
                    <el-option label="男" value="男"></el-option>
                  </el-select>
                </el-form-item>-->
                <!-- 出生日期 
                <el-form-item label="出生日期" prop="birthDay">
                  <el-date-picker
                    v-model="dataList.birthDay"
                    type="date"
                    placeholder="出生日期"
                    value-format="yyyy-MM-dd"
                    style="width: 60%"
                  >
                  </el-date-picker>
                </el-form-item>-->
                <!-- 籍贯 
                <el-form-item prop="birthPlace" label="籍贯">
                  <el-cascader
                    v-model="dataList.birthPlace"
                    :options="areaList"
                    placeholder="请选择籍贯"
                    style="width: 60%"
                  ></el-cascader>
                </el-form-item>-->
                <!-- 现所住地 -->
                <el-form-item label="通讯地址" prop="address">
                  <el-input
                    v-model="dataList.address"
                    placeholder="请填写通讯地址"
                    maxlength="200"
                  ></el-input>
                </el-form-item>
                <!-- 手机号码 -->
                <el-form-item label="电话" prop="phone">
                  <el-input
                    type="number"
                    v-model="dataList.phone"
                    placeholder="请填写电话"
                  ></el-input>
                </el-form-item>
                <!-- 毕业院校 -->
                <el-form-item label="毕业院校" prop="schoolName">
                  <el-input
                    v-model="dataList.schoolName"
                    placeholder="请填写毕业院校"
                  ></el-input>
                </el-form-item>
                <!-- 专业 -->
                <el-form-item label="专业" prop="major">
                  <el-input
                    v-model="dataList.major"
                    placeholder="请填写所学专业"
                  ></el-input>
                </el-form-item>
                <!-- 最高学历 -->
                <el-form-item label="最高学历" prop="eduLevel">
                  <el-select
                    v-model="dataList.eduLevel"
                    placeholder="请选择学历"
                    style="width: 100%"
                  >
                    <el-option label="研究生" value="研究生"></el-option>
                    <el-option label="本科" value="本科"></el-option>
                    <el-option label="大学" value="大学"></el-option>
                  </el-select>
                </el-form-item>
                <!-- 最高学位 -->
                <el-form-item label="最高学位" prop="degreeLevel">
                  <el-select
                    v-model="dataList.degreeLevel"
                    placeholder="请选择学位"
                    style="width: 100%"
                  >
                    <el-option
                      label="博士研究生"
                      value="博士研究生"
                    ></el-option>
                    <el-option
                      label="硕士研究生"
                      value="硕士研究生"
                    ></el-option>
                    <el-option label="学士" value="学士"></el-option>
                  </el-select>
                </el-form-item>

                <!-- 毕业时间 -->
                <el-form-item label="毕业时间" prop="endEduTime">
                  <el-date-picker
                    v-model="dataList.endEduTime"
                    type="date"
                    placeholder="毕业时间"
                    value-format="yyyy-MM-dd"
                    style="width: 100%"
                  >
                  </el-date-picker>
                </el-form-item>
              </div>
              <!-- 最近项目经历 -->
              <div class="section project">
                <!-- 学习及工作经历 -->
                <el-form-item label="学习及工作经历" prop="workExperience">
                  <el-input
                    type="textarea"
                    v-model="dataList.workExperience"
                    placeholder="请填写学习及工作经历"
                    show-word-limit
                  />
                </el-form-item>
                <!-- 科研成果 -->
                <el-form-item label="科研成果" prop="scientificPayoffs">
                  <el-input
                    type="textarea"
                    v-model="dataList.scientificPayoffs"
                    placeholder="请填写科研成果"
                  />
                </el-form-item>
                <!-- 意向岗位 -->
                <el-form-item label="意向岗位" prop="intendedPost">
                  <el-input
                    type="textarea"
                    v-model="dataList.intendedPost"
                    placeholder="请填写意向岗位"
                  />
                </el-form-item>
                <!-- 招聘场次 -->
                <el-form-item label="招聘场次" prop="recruitSessions">
                  <el-select
                    v-model="dataList.recruitSessions"
                    placeholder="请选择招聘场次"
                    style="width: 100%"
                  >
                    <el-option label="中国国际人才交流大会（深圳）" value="中国国际人才交流大会（深圳）"></el-option>
                    <el-option label="高校人才网第一届引才节（北京）" value="高校人才网第一届引才节（北京）"></el-option>
                    <el-option label="直播" value="直播"></el-option>
                  </el-select>
                </el-form-item>
              </div>
              <el-form-item class="box55">
                <el-button
                  type="primary"
                  @click="submitForm(dataList)"
                  style="width: 80%; height: 1rem"
                  >提交</el-button
                >
              </el-form-item>
            </div>
          </div>
        </div>
      </div>
    </el-form>
    <!-- 底部 -->
    <!--        <Footer/>-->
  </div>
</template>

<script>
import { baseData, fillInInfoAdd, getFillInInfoList } from "@/api/api";
import navBar from "@/components/navBar.vue";
import store from '@/store'

// 校验手机号
const validateMobile = (rule, value, callback) => {
  if (!/^1[3-9]\d{9}$/.test(value)) {
    callback(new Error("请输入正确的手机号"));
  } else {
    callback();
  }
};
export default {
  //组件注入
  components: { navBar },
  //存放数据
  data() {
    return {
      // 手写简历
      dataList: {
        username: "", //姓名
        sex: "", //性别
        birthDay: "", //出生日期
        birthPlace: "", //籍贯
        eduLevel: "", //最高学历
        degreeLevel: "", //最高学位
        schoolName: "", //毕业院校
        major: "", //专业
        endEduTime: "", //毕业时间
        address: "", //通讯地址
        phone: "", //电话
        workExperience: "", //学习及工作经历
        scientificPayoffs: "", //科研成果
        intendedPost: "", //意向岗位
        recruitSessions:"",//招聘场次
      },
      checkResult: "", //简历情况
      areaList: [], //省市区
      // 验证规则
      rulesadd: {
        username: [{ required: true, message: "请填写姓名" }],
        sex: [{ required: true, message: "请选择性别" }],
        birthDay: [{ required: true, message: "请选择出生日期" }],
        birthPlace: [{ required: true, message: "请选择籍贯" }],
        phone: [{ required: true, validator: validateMobile }],
        schoolName: [{ required: true, message: "请填写毕业院校" }],
        eduLevel: [{ required: true, message: "请选择最高学历" }],
        degreeLevel: [{ required: true, message: "请选择最高学位" }],
        recruitSessions: [{ required: true, message: "请选择招聘场次" }],
      },
    };
  },
  //接受父组件传递的值
  props: [],
  //监控data中的数据变化
  watch: {},
  //定义timeDefault计算属性：
  computed: {
    timeDefault() {
      var date = new Date();
      var s1 =
        date.getFullYear() -
        23 +
        "-" +
        (date.getMonth() + 1) +
        "-" +
        (date.getDate() - 1);
      return s1;
    },
  },
  //方法集合
  methods: {
    // 保存
    submitForm() {
      this.$refs.Refform.validate((valid) => {
        if (valid) {
          //前台转成字符串
          this.dataList.birthPlace = String(this.dataList.birthPlace);
          getFillInInfoList(this.dataList).then((res) => {
            //成功请求，判断result中是否有值，没有则调用添加方法
            if (res.code === 200 && (JSON.stringify(res.result) === "[]" || Object.keys(res.result).length === 0)) {
              //失败信息未采集，提交信息
              fillInInfoAdd(this.dataList).then((res) => {
                if (res.code === 200) {
                  this.$message.success("提交成功");
                  //清空
                  this.$refs["Refform"].resetFields();
                  //初始化日期
                  this.dataList.birthDay = this.timeDefault;
                  setTimeout(() => {
                    this.$router.push({path: '/submitSuccess'})
                  }, 1500)
                } else {
                  this.$message.error(res.message);
                }
              });
              
            } else {//无则提示信息已采集
              this.$message.success("信息已采集，请勿重复提交");
            }
          });
        } else {
          return false;
        }
      });
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  async created() {
    const res = await store.dispatch('app/getArea', 'provincesAndCitys')
    this.areaList = JSON.parse(JSON.stringify(res.result))
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    //初始化日期
    this.dataList.birthDay = this.timeDefault;
    //省市查询
   
    // baseData({
    //   clz: "provincesAndCitys",
    // }).then((res) => {
    //   if (res.code == 200) {
    //     this.areaList = res.result;
    //   }
    // });
  },
};
</script>

<style lang="scss">
@mixin text-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@mixin text-ellipsisclamp($clamp) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: $clamp;
  overflow: hidden;
}

@mixin transition {
  transition: all 0.3s;
}

.bt {
  padding: 0 10px;
  height: 24px;
  line-height: 24px;
  font-size: 20px;
  color: #fff;
  font-weight: normal;
  border-radius: 10px 0px 10px 0px;
  background: #e54437;
  display: inline-block;
  text-align: center;
  vertical-align: 2px;
  margin-left: 5px;
}
.PersonSimpleResume .main .block .left .resume .section .el-form-item {
  margin-bottom: 0.23rem !important;
}
.PersonSimpleResume {
  //background: #f6f6f6;
  position: relative;
  width: 100%;
  overflow: hidden;

  .el-input__inner {
    height: 60px;
  }

  .el-range-input {
    font-size: 22px;
  }

  .el-date-editor .el-range-separator {
    font-size: 22px;
  }

  .el-form-item__error {
    font-size: 18px;
  }

  .el-button {
    font-size: 22px;
  }
  .main {
    position: relative;
    z-index: 0;
    min-height: 500px;

    .banner {
      width: 100%;
      height: 120px;
      background: url("../../assets/person-bg.jpg") center no-repeat;
      background-size: cover;
    }

    .block {
      height: auto;
      overflow: hidden;
      padding-bottom: 60px;

      .left {
        width: 100%;
        height: auto;
        overflow: hidden;

        .top {
          height: auto;
          overflow: hidden;
          background: #eee;
          padding: 15px 30px;

          label {
            font-size: 28px;
            color: #666;
            font-weight: bold;
            line-height: 40px;
            display: inline-block;
            vertical-align: -1px;
          }

          .el-select {
            width: 180px;

            .el-input__inner {
              font-size: 28px;
              border: 0 !important;
              background: none !important;
              color: #e54437;
              font-weight: bold;
            }

            .el-option {
              font-size: 28px;
            }
          }
        }

        .resume {
          height: auto;
          overflow: hidden;
          padding: 30px;
          background: #fff;

          .section {
            height: auto;
            overflow: hidden;
            // margin-bottom: 20px;
            padding-bottom: 20px;
            // border-bottom: 1px solid #f2f2f2;

            .title {
              font-size: 30px;
              color: #333;
              font-weight: bold;
              position: relative;
              padding-left: 15px;
              margin-bottom: 10px;

              &:after {
                content: "";
                width: 3px;
                height: 15px;
                background: #e54437;
                position: absolute;
                left: 0;
                top: 3px;
              }

              .btnEdit {
                opacity: 1;
              }
            }

            .btnEdit {
              opacity: 0;
              float: right;
              font-size: 24px;
              /*font-weight: normal;*/
              font-weight: bold;
              color: #999;
              @include transition();
              cursor: pointer;

              margin: 0 10px 0 20px;

              i {
                margin-right: 4px;
              }

              &:hover {
                color: #e54437;
              }
            }

            .form {
              height: auto;
              padding: 30px;

              .el-radio {
                min-width: 100px;
                text-align: center;
                margin: 0 15px 0 0;
                border-radius: 0;
                background: #fff;

                &:last-child {
                  margin: 0;
                }
              }

              .label {
                width: 25%;
              }

              .el-row {
                margin-bottom: 22px;
              }

              .el-input,
              .el-select,
              .el-cascader {
                width: 100%;
              }

              .el-input__inner {
                border-radius: 0;
              }

              .el-icon-date,
              .el-input__icon {
                vertical-align: -2px;
              }

              .el-textarea__inner {
                height: 100px;
                border-radius: 0;
                padding: 10px 15px;
                font-size: 26px !important;
              }

              .el-textarea .el-input__count {
                line-height: normal;
              }

              .el-form-item:last-child {
                margin: 0;
              }
              .left,
              .right {
                width: 48%;
                height: auto;
                overflow: visible;
              }

              .el-upload {
                width: 140px;
                height: 140px;
                line-height: 140px;
                border: 1px dashed #dcdfe6;
                border-radius: 5px;
                cursor: pointer;

                i {
                  font-size: 24px;
                  color: #999;
                }
              }

              .hide {
                .el-upload,
                .el-upload__tip {
                  display: none;
                }
              }
            }

            .el-form_edit {
            }

            .primary {
              height: auto;
              overflow: hidden;
              position: relative;

              ul {
                height: auto;
                overflow: hidden;

                li {
                  height: auto;
                  overflow: hidden;
                  margin-bottom: 10px;

                  .t {
                    font-size: 24px;
                    color: #333;

                    span {
                      font-size: 20px;
                      color: #999;
                      margin-left: 10px;
                    }

                    .btnEdit {
                      margin-right: 0;
                    }
                  }

                  .dsc {
                    font-size: 18px;
                    color: #888;
                    line-height: 30px;
                    margin-top: 8px;

                    span {
                      margin-right: 15px;
                      position: relative;
                      padding-right: 15px;

                      &:after {
                        content: "";
                        width: 1px;
                        height: 12px;
                        background: #eee;
                        position: absolute;
                        right: 0;
                        top: 2px;
                      }

                      &:last-child {
                        margin: 0;
                        padding: 0;

                        &:after {
                          display: none;
                        }
                      }
                    }

                    .tt {
                      color: #666;
                    }

                    p {
                      line-height: 22px;
                      white-space: pre-wrap;
                    }
                  }

                  dl {
                    height: auto;
                    overflow: hidden;
                    margin-top: 8px;

                    dd {
                      width: 80%;
                      font-size: 24px;
                      color: #666;
                      float: left;
                      line-height: 30px;
                      padding: 5px;

                      span {
                        line-height: 24px;
                        padding: 0 10px;
                        background: #eee;
                        display: inline-block;
                        margin-right: 10px;
                      }
                    }
                  }

                  &:last-child {
                    margin: 0;
                  }
                }
              }

              .txt {
                white-space: pre-wrap;
                word-wrap: break-word;
                font-size: 24px;
                color: #666;
                cursor: pointer;
                padding: 10px;
                @include transition();

                &:hover {
                  background: #f9f9f9;

                  .btnEdit {
                    opacity: 1;
                  }
                }
              }
            }

            .edit {
              height: auto;
              overflow: hidden;
              position: relative;
              background: #f6f6f6;
              margin-top: 20px;
              font-size: 24px;
            }

            .edit_margin_top {
              margin-top: 40px;
            }

            .edit .el-form .el-row .el-col .el-form-item .el-form-item__label {
              font-size: 26px;
            }

            .el-form-item__content .el-input__inner {
              font-size: 26px;
              padding: 0 0 0 0.2rem;
            }

            .el-input--prefix .el-input__inner {
              padding-left: 0.4rem !important;
            }

            .el-form-item__content .el-radio__label {
              font-size: 26px;
            }

            .el-cascader-node__label {
              font-size: 26px !important;
            }

            .el-form-item__label {
              font-size: 28px;
              padding: 0.14rem 0.16rem 0 0;
            }
            .el-form-item {
              margin-bottom: 0.29333rem;
            }
            &:last-child {
              margin: 0;
              padding: 0;
              border: 0;
            }
          }

          .userinfo {
            .photo {
              //width: 80px;
              //height: 80px;
              border-radius: 50%;
              overflow: hidden;
              float: left;
              margin-right: 20px;
              cursor: pointer;
              position: relative;

              img {
                width: 100%;
                height: 100%;
              }

              .avatar-uploader {
                width: 100%;
                height: 100%;
                background: rgba($color: #000000, $alpha: 0.5);
                position: absolute;
                left: 0;
                top: 0;
                opacity: 0;
                @include transition();

                i {
                  font-size: 24px;
                  color: #fff;
                }

                p {
                  font-size: 20px;
                  color: #fff;
                }

                &:focus {
                  color: #fff;
                }

                .el-upload {
                  width: 100%;
                  height: 100%;
                  display: flex;
                  flex-flow: column;
                  align-items: center;
                  justify-content: center;
                }
              }

              &:hover .avatar-uploader {
                opacity: 1;
              }
            }

            .btnEdit {
              opacity: 1;
            }

            .text {
              height: auto;
              overflow: hidden;

              .name {
                font-size: 28px;
                color: #333;
                font-weight: bold;

                span {
                  font-size: 22px;
                  color: #999;
                  font-weight: normal;
                  margin-left: 10px;
                }
              }

              .other {
                height: auto;
                overflow: hidden;
                margin-top: 0px;

                span {
                  font-size: 24px;
                  color: #666666;
                  position: relative;
                  padding-right: 15px;
                  margin-left: 15px;

                  &:after {
                    content: "";
                    width: 1px;
                    height: 12px;
                    background: #e8e8e8;
                    position: absolute;
                    right: 0;
                    top: 3px;
                  }

                  &:first-child {
                    margin: 0;
                  }

                  &:last-child:after {
                    display: none;
                  }
                }
              }

              .contact {
                height: auto;
                overflow: hidden;
                margin-top: 0px;

                span {
                  font-size: 24px;
                  color: #333;
                  margin-right: 30px;

                  i {
                    font-size: 16px;
                    vertical-align: -1px;
                    color: #999;

                    &.icon-email {
                      font-size: 17px;
                      margin-right: 3px;
                    }
                  }
                }
              }
            }

            .btnEdit {
              position: absolute;
              right: 0;
              top: 0;
            }

            .look {
              font-size: 24px;
              font-weight: bold;
              color: #999;
              cursor: pointer;
              position: absolute;
              right: 0;
              top: 50px;
              margin: 0 10px 0 20px;
              @include transition();

              i {
                margin-right: 4px;
              }

              &:hover {
                color: #e54437;
              }
            }
          }

          .wantJob,
          .work,
          .education {
            .el-input {
              width: 100% !important;
            }

            .el-radio {
              min-width: 100px !important;
            }
          }

          .project {
            .el-textarea__inner {
              height: 150px !important;
              font-size: 26px !important;
            }
          }
        }
      }

      .right {
        width: 270px;
        height: auto;
        overflow: hidden;
      }
    }
  }

  .uploadPop {
    .vue-cropper {
      height: 300px;

      img {
        transition: none;
      }
    }

    .btns {
      text-align: center;
      margin-top: 25px;

      .el-button {
        width: 100px;
        margin: 0 10px;
      }
    }
  }

  .lookFile {
    .box {
      height: auto;
      max-height: 500px;
      overflow-y: auto;

      img {
        display: block;
        margin: 0 auto;
      }
    }
  }
}

.el-radio.is-bordered {
  height: 58px;
}
.el-select-dropdown__item {
  font-size: 26px;
  height: 45px;
  padding: 0.1rem 0.26667rem;
}
.el-date-table td span {
  font-size: 26px;
  width: 0.4rem;
  height: 0.32rem;
}
.el-date-table th {
  font-size: 28px;
}
.el-date-picker__header-label {
  font-size: 28px;
}
.el-picker-panel__icon-btn {
  font-size: 28px;
}
.el-cascader-node__label {
  font-size: 26px !important;
}
</style>

<style scoped>
.box88 {
  padding: 10px 0 0 18px;
}

.box77 {
  position: absolute;
  right: 30px;
  font-size: 28px;
  font-weight: bold;
  color: #999;
  cursor: pointer;
  margin: 0 10px 0 20px;
}

.box22 {
  width: 140px;
  height: 140px;
  line-height: 140px;
  border: 1px dashed #dcdfe6;
  border-radius: 5px;
  cursor: pointer;
}

.box66 {
  margin-top: 0;
  padding-top: 0;
  /* line-height: 0px; */
  /* background-color: black; */
}

.box55 {
  margin-top: 30px;
  text-align: center;
}
</style>
